<template>
  <div class="page-box flex-col">
    <div class="page-bg" />

    <div class="page-container flex-col">
      <scroll-view class="scroll-box" scroll-y="true">
        <div class="bd1 flex-col">
          <!-- <span class="txt3">松下专业</span>
          <div class="mod5 flex-col"></div>
          <span class="word1">Panasonic</span>
          <span class="info1">BUSINESS</span> -->
          <img class="title-bg" src="../../static/images/logo3.png" alt="" />
          <img class="title-bg2" src="../../static/images/logo2.png" alt="" />
          <div class="mod6 flex-col"></div>
          <span class="txt4">售后服务</span>
          <div class="mod7 flex-row">
            <div
              class="group2 flex-col"
              v-for="item in menuList1"
              :key="item.id"
              @click="onOpen(item)"
            >
              <div class="mod8 flex-col">
                <img
                  class="img1"
                  referrerpolicy="no-referrer"
                  :src="$host + item.icon"
                />
                <span class="word2">{{ item.name }}</span>
              </div>
            </div>
            <!-- <div class="group3 flex-col">
              <div class="block1 flex-col">
                <img class="img2" referrerpolicy="no-referrer" />
                <span class="word3">咨询窗口</span>
              </div>
            </div> -->
          </div>
          <div class="mod9 flex-row">
            <div
              class="section1 flex-col"
              v-for="item in menuList2"
              :key="item.id"
              @click="onOpen(item)"
            >
              <div class="group4 flex-col">
                <img
                  class="img3"
                  referrerpolicy="no-referrer"
                  :src="$host + item.icon"
                />
                <span class="info2">{{ item.name }}</span>
              </div>
            </div>
            <!-- <div class="section2 flex-col">
              <div class="wrap1 flex-col">
                <img class="img4" referrerpolicy="no-referrer" />
                <span class="word4">下载中心</span>
              </div>
            </div>
            <div class="section3 flex-col">
              <div class="bd2 flex-col">
                <img class="pic2" referrerpolicy="no-referrer" />
                <span class="word5">实用工具</span>
              </div>
            </div> -->
          </div>
        </div>
      </scroll-view>
    </div>
  </div>
  <!-- <view>
    <div v-for="item in menuList" :key="item.id" @click="onOpen(item)">
      {{ item.name }}
    </div>
  </view> -->
</template>

<script>
import { getMenuList } from "@/api";
export default {
  data() {
    return {
      menuList1: [],
      menuList2: [],
    };
  },
  created() {
    getMenuList({
      pageSize: 100,
      pageNum: 1,
    }).then((res) => {
      this.menuList1 = res.rows.slice(0, 2);
      this.menuList2 = res.rows.slice(2);
    });
  },
  methods: {
    onOpen(item) {
      const url = item.url;
      if (/^\/pages/.test(url)) {
        uni.navigateTo({
          url: url,
        });
      } else if (/^http/.test(url)) {
        window.location.href = url;
        // uni.navigateTo({
        //   url: `/pages/webview/index?url=${url}`,
        // });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "uview-ui/index.scss";
.bd1 {
  z-index: auto;
  width: 750rpx;
  height: 1004rpx;
  .title-bg {
    width: 272rpx;
    height: 84rpx;
    margin: 43rpx auto 0rpx;
  }
  .title-bg2{
    width: 272rpx;
    height: 128rpx;
    margin: 0 auto 0rpx;
  }
  .txt3 {
    z-index: 61;
    width: 191rpx;
    height: 65rpx;
    display: block;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 48rpx;
    font-family: Alibaba-PuHuiTi-H;
    white-space: nowrap;
    line-height: 65rpx;
    text-align: center;
    align-self: center;
    margin-top: 43rpx;
  }
  .mod5 {
    z-index: 60;
    width: 64rpx;
    height: 10rpx;
    background-color: rgba(255, 191, 16, 1);
    align-self: center;
    margin-top: 8rpx;
  }
  .word1 {
    z-index: 63;
    width: 272rpx;
    height: 68rpx;
    display: block;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 48rpx;
    font-family: Arial-Black;
    white-space: nowrap;
    line-height: 68rpx;
    text-align: center;
    align-self: center;
    margin-top: 8rpx;
  }
  .info1 {
    z-index: 64;
    width: 126rpx;
    height: 37rpx;
    display: block;
    overflow-wrap: break-word;
    color: #9b9b9c;
    font-size: 26rpx;
    font-family: PingFangSC-Light;
    white-space: nowrap;
    line-height: 37rpx;
    text-align: center;
    align-self: center;
  }
  .mod6 {
    z-index: 58;
    width: 686rpx;
    height: 1rpx;
    background-color: rgba(84, 84, 84, 1);
    align-self: center;
    margin-top: 40rpx;
  }
  .txt4 {
    width: 138rpx;
    display: block;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 34rpx;
    letter-spacing: 0.36907893419265747rpx;
    font-family: PingFangSC-Medium;
    white-space: nowrap;
    line-height: 48rpx;
    text-align: left;
    align-self: flex-start;
    margin: 40rpx 0 0 32rpx;
    border-left: 8rpx solid #ffbf10;
    padding-left: 10rpx;
  }
  .mod7 {
    width: 448rpx;
    // height: 186rpx;
    justify-content: space-between;
    margin: 40rpx 0 0 152rpx;
    .group2 {
      border-radius: 8rpx;
      // border: 1px solid rgba(255, 191, 16, 1);
      @include border-1px(rgba(255, 191, 16, 1));
      background-color: rgba(28, 28, 30, 1);
      width: 212rpx;
      justify-content: center;
      align-items: center;
      // overflow: hidden;
      box-sizing: border-box;
      height: 186rpx;
      .mod8 {
        width: 132rpx;
        height: 109rpx;
        .img1 {
          width: 64rpx;
          height: 64rpx;
          align-self: center;
        }
        .word2 {
          width: 132rpx;
          height: 37rpx;
          display: block;
          overflow-wrap: break-word;
          color: rgba(255, 255, 255, 1);
          font-size: 26rpx;
          letter-spacing: 0.28223681449890137rpx;
          white-space: nowrap;
          line-height: 37rpx;
          text-align: center;
          margin-top: 8rpx;
        }
      }
    }
    .group3 {
      height: 186rpx;
      border-radius: 8rpx;
      border: 1rpx solid rgba(255, 191, 16, 1);
      background-color: rgba(28, 28, 30, 1);
      width: 212rpx;
      justify-content: flex-end;
      padding-bottom: 35rpx;
      align-items: center;
      height: 186rpx;
      .block1 {
        width: 106rpx;
        height: 109rpx;
        .img2 {
          width: 64rpx;
          height: 64rpx;
          align-self: center;
        }
        .word3 {
          width: 106rpx;
          height: 37rpx;
          display: block;
          overflow-wrap: break-word;
          color: rgba(255, 255, 255, 1);
          font-size: 26rpx;
          letter-spacing: 0.28223681449890137rpx;
          white-space: nowrap;
          line-height: 37rpx;
          text-align: center;
          margin-top: 8rpx;
        }
      }
    }
  }
  .mod9 {
    width: 684rpx;
    // height: 186rpx;
    // justify-content: space-between;
    margin: 48rpx 0 0 34rpx;
    flex-wrap: wrap;
    .section1 {
      margin-right: 18rpx;
      // overflow: hidden;
      box-sizing: border-box;
      height: 186rpx;
      &:nth-of-type(3n) {
        margin-right: 0;
      }
      border-radius: 8rpx;
      @include border-1px(rgba(255, 191, 16, 1));
      // border: 1px solid rgba(255, 191, 16, 1);
      background-color: rgba(28, 28, 30, 1);
      width: 212rpx;
      justify-content: center;
      // padding-bottom: 35rpx;
      align-items: center;
      margin-bottom: 10rpx;
      .group4 {
        width: 106rpx;
        height: 109rpx;
        .img3 {
          width: 64rpx;
          height: 64rpx;
          align-self: center;
        }
        .info2 {
          width: 106rpx;
          height: 37rpx;
          display: block;
          overflow-wrap: break-word;
          color: rgba(255, 255, 255, 1);
          font-size: 26rpx;
          letter-spacing: 0.28223681449890137rpx;
          white-space: nowrap;
          line-height: 37rpx;
          text-align: center;
          margin-top: 8rpx;
        }
      }
    }
  }
}
</style>
